<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>8886686</title>
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
        }

        canvas {
            border: 1px solid #000;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="1280px" height="1280px" ></canvas>

<div style="position: absolute; right: 20px; top: 20px; padding: 20px; background-color: rgba(142, 142, 132, 0.53); width: 300px; box-shadow: 3px 2px 10px 1px black;">
    <div>请输入经度:
        <input type="text" id="lon" size="20" name="lonx1"  style="width: 150px; height: 28px; color: rgb(23, 21, 247)" />
    </div>
    <div>请输入纬度:
        <input type="text" id="lat" size="20" name="laty1" style="width: 150px; height: 28px; color: rgb(23, 21, 247)" />
    </div>
    <div>请输入放缩等级:
        <input type="text" id="zoom" size="20"  style="width: 150px; height: 28px; color: rgb(23, 21, 247)" />
        <button style="position: relative; height: 33px; width: 50px; background-color: #3385ff" onclick="bt()">➤</button>
    </div>
    <div>
        <button style="position: relative; height: 33px; width: 50px; background-color: #3385ff" onclick="jia()">+</button>
        <button style="position: relative; height: 33px; width: 50px; background-color: #3385ff" onclick="jian()" >-</button>
    </div>
</div>

<script type="text/javascript">
    var canvas,context;

    var z = 8;
    var x = long2tile(114.3962,z);
    var y = lat2tile(30.5217, z);

//114.3962  30.5217
//121.4889  31.2255
    function jian() {
        var lonx=document.getElementById('lon').value;
        var laty=document.getElementById('lat').value;
        var zomz=document.getElementById('zoom').value;

        var lonxx=parseFloat(lonx);
        var latyy=parseFloat(laty);
        var zomzz=parseFloat(zomz)-1;

        document.getElementById('zoom').value=zomzz;


        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');


        function dooo(m,n) {
            var xx=long2tile(lonxx,zomzz)+m-2;
            var yy=lat2tile(latyy, zomzz)+n-2;
            var img = new Image();
            //定义Image的对象
            img.onload = function () {
                img.onload=null;
                context.drawImage(img,m*256,n*256,256,256);
            }
            img.src = "http://a.tile.openstreetmap.org/"+zomzz+"/"+xx+"/"+yy+".png";
        }
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {
                dooo(i, j);
            }
        }

    }
    function jia() {
        var lonx=document.getElementById('lon').value;
        var laty=document.getElementById('lat').value;
        var zomz=document.getElementById('zoom').value;

        var lonxx=parseFloat(lonx);
        var latyy=parseFloat(laty);
        var zomzz=parseFloat(zomz)+1;

        document.getElementById('zoom').value=zomzz;

        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');


        function dooo(m,n) {
            var xx=long2tile(lonxx,zomzz)+m-2;
            var yy=lat2tile(latyy, zomzz)+n-2;
            var img = new Image();
            //定义Image的对象
            img.onload = function () {
                img.onload=null;
                context.drawImage(img,m*256,n*256,256,256);
            }
            img.src = "http://a.tile.openstreetmap.org/"+zomzz+"/"+xx+"/"+yy+".png";
        }
        for (var i = 0; i < 5; i++) {
            for (var j = 0; j < 5; j++) {
                dooo(i, j);
            }
        }

    }
   function bt() {
       var lonx=document.getElementById('lon').value;
       var laty=document.getElementById('lat').value;
       var zomz=document.getElementById('zoom').value;

       var lonxx=parseFloat(lonx);
       var latyy=parseFloat(laty);
       var zomzz=parseFloat(zomz);


       canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');


       function dooo(m,n) {
           var xx=long2tile(lonxx,zomzz)+m-2;
           var yy=lat2tile(latyy, zomzz)+n-2;
           var img = new Image();
            //定义Image的对象
           img.onload = function () {
               img.onload=null;
               context.drawImage(img,m*256,n*256,256,256);
           }
           img.src = "http://a.tile.openstreetmap.org/"+zomzz+"/"+xx+"/"+yy+".png";
       }
       for (var i = 0; i < 5; i++) {
           for (var j = 0; j < 5; j++) {
               dooo(i, j);
           }
       }
       /*img = new Image();
       img.onload = function () {
           imgIsLoaded = true;
           context.drawImage(img,0,0)
       }
       img.src = "http://a.tile.openstreetmap.org/"+zomzz+"/"+long2tile(lonxx,zomzz)+"/"+lat2tile(latyy, zomzz)+".png";*/
   }


    function long2tile(lon, zoom)
    {
        return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
    }

    function lat2tile(lat, zoom)
    {
        return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
    }

</script>
</body>
</html>
